<template>
  <body id="div_0">
  <div class="search-res">
    <!--<div class="background">
      <img src="../../assets/images/background8.jpg" class="background" alt="">
    </div>-->
    <PageHeader :showSearch="showSearch"
                :tag="tag"
                :options="articleOptions"
                :select="header_select"
                :input="input"></PageHeader>
    <div class="new-search-res">
    <ArticleRes :header_select="header_select"
                :input="input"
                :aggregation="aggregation"
                :articles="resultList"
                :total_hits_str="total_hits_str"
                :total_hits="total_hits"
                @changeCollect="changeCollect"
                @high="highlight"
                mode="normal"></ArticleRes>
    </div>
  </div>
  </body>
</template>

<script>

import PageHeader from "../../components/PageHeader";
import ArticleRes from "../../components/ArticleRes";
import qs from "qs";
import user from "../../store/user";
import highlightApi from "../../utils/highlightApi";

  export default {
    components: {ArticleRes, PageHeader},
    mixins: [highlightApi],
    data() {
      return {
        form:{
          title:'',
          author:'',
          abstract:'',
          area:''
        },
        showSearch: true,
        tag: 'searchRes',
        header_select: 'title',
        input: "",
        isShowTip: false,
        resultList:[],
        articleOptions: [{
            value: 'title',
            label: '篇名'
          }, {
            value: 'abstract',
            label: '摘要'
          }, {
            value: 'field',
            label: '领域'
          }, {
            value: 'author_name',
            label: '作者'
          }, {
            value: 'affiliation_name',
            label: '作者单位'
          },
        ],

        total_hits:0,
        total_hits_str: '0',
        aggregation: {
          max_year: 2022,
          min_year: 2009,
          conference: [
            {
              citation_count: 384,
              conference_id: "3083037350",
              count: 8,
              end: "2021-05-29",
              id: "3083037350",
              location: "Madrid, Spain",
              name: "ICSE 2021",
              offical_url: "https://conf.researchr.org/home/icse-2021",
              paper_count: 471,
              start: "2021-05-23"
            },
            {
              citation_count: 3246,
              conference_id: "71090686",
              count: 8,
              end: "2014-06-01",
              id: "71090686",
              location: "Hyderabad, India",
              name: "MSR 2014",
              offical_url: "http://2014.msrconf.org/",
              paper_count: 63,
              start: "2014-05-31"
            },],
          doctype: [
            {
              "Conference": 286
            },
            {
              "Journal": 170
            },
            {
              "Repository": 144
            },
            {
              "Thesis": 26
            },
            {
              "Patent": 12
            }
          ],
          journal: [
            {
              citation_count: "19256",
              count: 78,
              issn: "",
              id: "2595428313",
              journal_id: "2595428313",
              name: "arXiv: Software Engineering",
              paper_count: "7794",
              publisher: "",
              rank: "10353",
              webpage: ""
            },
            {
              citation_count: "34541",
              count: 17,
              issn: "",
              id: "2595428313",
              journal_id: "2595804992",
              name: "arXiv: Social and Information Networks",
              paper_count: "7232",
              publisher: "",
              rank: "10327",
              webpage: ""
            },
          ],
          publisher: [
            {
              "IEEE": 13
            },
            {
              "Apress, Berkeley, CA": 8
            },
            {
              "IOP Publishing": 7
            },
            {
              "ACM": 5
            },
            {
              "The Open Journal": 4
            },
            {
              "Elsevier BV": 3
            },
            {
              "Github": 3
            },
            {
              "Packt Publishing": 3
            },
            {
              "Apress": 2
            }
          ]
        },
        //articles表示当前页面显示的文章块数组
        articles:[
          {
            author_affiliation: [
              "University of Warsaw",
              "Facebook",
              "Salesforce.com",
              "University of Washington",
              "Nvidia",
              "Mario Negri Institute for Pharmacological Research",
              "University of Oxford",
              "ETH Zurich",
              "Stanford University",
              "Twitter",
              "Tsinghua University"
            ],
            authors: [
              {
                affiliation_id: "4654613",
                affiliation_name: "",
                affiliation_order: 1,
                author_id: "2411226248",
                author_name: "Adam Paszke",
                order: "1"
              },
              {
                affiliation_id: "4654613",
                affiliation_name: "",
                affiliation_order: 1,
                author_id: "2411226248",
                author_name: "Adam Paszke",
                order: "2"
              },
              {
                affiliation_id: "4654613",
                affiliation_name: "",
                affiliation_order: 1,
                author_id: "2411226248",
                author_name: "Adam Paszke",
                order: "3"
              },
            ],
            fields:[
              {
                "citation_count": 3383974,
                "field_id": "115903868",
                "level": 1,
                "main_type": "business.industry",
                "name": "Software engineering",
                "paper_count": 368585,
                "rank": 8347
              },
              {
                "citation_count": 3901149,
                "field_id": "136197465",
                "level": 2,
                "main_type": "",
                "name": "Variety (cybernetics)",
                "paper_count": 243478,
                "rank": 8507
              }],
            paper_id: "4cd223df721b722b1c40689caa52932a41fcc223",
            paper_title: "Knowledge-rich, computer-assisted composition of Chinese couplets Knowledge-rich, computer-assisted composition of Chinese couplets",
            abstract: "Recent research effort in poem composition has focused on the use of automatic language generation to produce a polished poem. A less explored question is how effectively a computer can serve as an interactive assistant to a poet. For this purpose, we built a web application that combines rich linguistic knowledge from classical Chinese philology with statistical natural language processing techniques. The application assists users in composing a ‘couplet’—a pair of lines in a traditional Chinese poem—by making suggestions for the next and corresponding characters. A couplet must meet a complicated set of requirements on phonology, syntax, and parallelism, which are challenging for an amateur poet to master. The application checks conformance to these requirements and makes suggestions for characters based on lexical, syntactic, and semantic properties. A distinguishing feature of the application is its extensive use of linguistic knowledge, enabling it to inform users of specific phonological principles in detail, and to explicitly model semantic parallelism, an essential characteristic of Chinese poetry. We evaluate the quality of poems composed solely with characters suggested by the application, and the coverage of its character suggestions.",
            citation_count: 3288,
            comment_count: 5,
            year:2021,
            reference_count: 42,
            is_collect:true,
            // 是否收藏
          },
          {
            authors: [
              {
                author_name: "John Lee",
                ids: [
                  "3362353",
                ]
              },
              {
                author_name: "Zuo_zuo",
                ids: [
                  "19373260",
                ]
              },
            ],
            fields:[
              {
                "citation_count": 3383974,
                "field_id": "115903868",
                "level": 1,
                "main_type": "business.industry",
                "name": "Software engineering",
                "paper_count": 368585,
                "rank": 8347
              },
              {
                "citation_count": 3901149,
                "field_id": "136197465",
                "level": 2,
                "main_type": "",
                "name": "Variety (cybernetics)",
                "paper_count": 243478,
                "rank": 8507
              }],
            paper_id: "4cd223df721b722b1c40689caa52932a41fcc223",
            paper_title: "Knowledge-rich, computer-assisted composition of Chinese couplets",
            abstract: "Recent research effort in poem composition has focused on the use of automatic language generation to produce a polished poem. A less explored question is how effectively a computer can serve as an interactive assistant to a poet. For this purpose, we built a web application that combines rich linguistic knowledge from classical Chinese philology with statistical natural language processing techniques. The application assists users in composing a ‘couplet’—a pair of lines in a traditional Chinese poem—by making suggestions for the next and corresponding characters. A couplet must meet a complicated set of requirements on phonology, syntax, and parallelism, which are challenging for an amateur poet to master. The application checks conformance to these requirements and makes suggestions for characters based on lexical, syntactic, and semantic properties. A distinguishing feature of the application is its extensive use of linguistic knowledge, enabling it to inform users of specific phonological principles in detail, and to explicitly model semantic parallelism, an essential characteristic of Chinese poetry. We evaluate the quality of poems composed solely with characters suggested by the application, and the coverage of its character suggestions.",
            citation_count: 3288,
            comment_count: 5,
            year:2021,
            reference_count: 42,
            is_collect:true,
            // 是否收藏
          },
          {
            authors: [
              {
                author_name: "John Lee",
                ids: [
                  "3362353",
                ]
              },
              {
                author_name: "Zuo_zuo",
                ids: [
                  "19373260",
                ]
              },
            ],
            fields:[
              {
                "citation_count": 3383974,
                "field_id": "115903868",
                "level": 1,
                "main_type": "business.industry",
                "name": "Software engineering",
                "paper_count": 368585,
                "rank": 8347
              },
              {
                "citation_count": 3901149,
                "field_id": "136197465",
                "level": 2,
                "main_type": "",
                "name": "Variety (cybernetics)",
                "paper_count": 243478,
                "rank": 8507
              }],
            paper_id: "4cd223df721b722b1c40689caa52932a41fcc223",
            paper_title: "Knowledge-rich, computer-assisted composition of Chinese couplets",
            abstract: "Recent research effort in poem composition has focused on the use of automatic language generation to produce a polished poem. A less explored question is how effectively a computer can serve as an interactive assistant to a poet. For this purpose, we built a web application that combines rich linguistic knowledge from classical Chinese philology with statistical natural language processing techniques. The application assists users in composing a ‘couplet’—a pair of lines in a traditional Chinese poem—by making suggestions for the next and corresponding characters. A couplet must meet a complicated set of requirements on phonology, syntax, and parallelism, which are challenging for an amateur poet to master. The application checks conformance to these requirements and makes suggestions for characters based on lexical, syntactic, and semantic properties. A distinguishing feature of the application is its extensive use of linguistic knowledge, enabling it to inform users of specific phonological principles in detail, and to explicitly model semantic parallelism, an essential characteristic of Chinese poetry. We evaluate the quality of poems composed solely with characters suggested by the application, and the coverage of its character suggestions.",
            citation_count: 3288,
            comment_count: 5,
            year:2021,
            reference_count: 42,
            is_collect:true,
            // 是否收藏
          }
        ],
      }
    },
    created() {
      let _query = this.$route.query;
      let _search_key = Object.keys(_query)[0];
      let _search_value = _query[_search_key];

      this.header_select = _search_key;
      this.input = _search_value;
      console.log(this.input);
      this.getSearchRes(1);
    },
    methods:{
      getSearchRes(pageIdx) {
        console.log(this.header_select);
        switch (this.header_select){
          case "title": this.form.title = this.input; break;
          case "abstract": this.form.abstract = this.input; break;
          case "field": this.form.area = this.input; break;
          case "author_name": this.form.author = this.input; break;
          //case "affiliation_name": this.form.title = this.input; break;
        }
        console.log(this.input);
        //let _loadingIns = this.$loading({fullscreen: true, text: '拼命加载中'});
        const formData = new FormData();
        formData.append("name",this.form.title);
        formData.append("author",this.form.author);
        formData.append("intro",this.form.abstract);
        formData.append("area",this.form.area);
        console.log("name : " + this.form.title);
        console.log("author : " + this.form.author);
        console.log("intro : " + this.form.abstract);
        console.log("area : " + this.form.area);
        console.log('---------');
        console.log(formData);
        console.log('---------');
        this.$axios({
          method: 'post',
          url: 'my_app1/normal_search',
          data : formData,
        })
        .then(res => {
          //_loadingIns.close();
          //switch (res.data.error) {
          //   case 200:
          //     this.articles = res.data.details;
          //     this.aggregation = res.data.aggregation;
          //     this.total_hits = res.data.total_hits;
          //     this.total_hits_str = res.data.total_hits.toLocaleString();
          //     if (res.data.total_hits === 10000)
          //       this.total_hits_str = "10000+";
          //     // 获取 paper 是否收藏
          //     this.getCollectStatus();
          //     this.$forceUpdate();
          //     this.highlight();
          //     break;
          //   case 404:
          //     this.total_hits = 0;
          //     this.total_hits_str = '0';
          //     break;
          //   case 500:
          //     this.$message.error("系统发生错误，请联系管理员！");
          //     setTimeout(() => {
          //       this.$router.push("/");
          //     }, 1500);
          //     break;
          //}
          this.resultList = this.articles;
          this.articles = res.data.articles;
          this.resultList = this.articles;
          console.log(this.articles);
          this.total_hits_str = res.data.len;
          this.total_hits = this.total_hits_str - 0;
          console.log(res.data.msg);
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        })
      },
      changeCollect(data) {
        let paper = data.paper;
        let status = data.newStatus;
        for (var i = 0; i < this.articles.length; i++)
          if (this.articles[i].paper_id === paper.paper_id)
            this.articles[i].is_collect = status;
      },
      getCollectStatus() {
        const userInfo = user.getters.getUser(user.state());
        if (!userInfo) return;
        // 处理 paper_ids
        let paper_ids = [];
        let paper_collects = [];
        for (let i = 0; i < this.articles.length; i++)
          paper_ids.push(this.articles[i].paper_id);

        this.$axios({
          method: 'post',
          url: '/social/get/paper',
          data: qs.stringify({
            user_id: userInfo.user.userId,
            paper_ids: JSON.stringify(paper_ids),
          })
        })
        .then(res => {
          switch (res.data.status) {
            case 200:
              paper_collects = res.data.papers_attribute;
              for (let i = 0; i < this.articles.length; i++)
                for (let j = 0; j < paper_collects.length; j++)
                  if (this.articles[i].paper_id === paper_collects[j].paper_id)
                    // TIP: 数组层次多，直接改变其值子组件不重新渲染
                    this.$set(this.articles[i], 'is_collect', paper_collects[j].is_collected);
                    // this.articles[i].is_collect = paper_collects[j].is_collected;
              break;
            case 401:
              console.log("传参错误！");
              break;
            case 402:
              this.$userInvalid();
              break;
            case 404:
              this.$userNotFound();
              break;
          }
        })
        .catch(err => {
          console.log(err);
        })
      },
    },
  };
</script>

<style scoped>

#div_0{
  width: 100%;
  height: 100%;
  border: 1px #1A4BAF;
  background-image: url("../../assets/images/background8.jpg");
  background-size: cover;
  background-attachment: fixed;
}

.new-search-res {
  width: 1830px;
  margin-left: 110px;
}

/* .search-res >>> .el-input-number.is-controls-right .el-input-number__decrease{
  width:15px !important;
  height: 14px;

}

.search-res >>> .el-input-number.is-controls-right .el-input-number__increase{
  width:15px !important;
  height: 14px;
  margin-top: 3px;
}

.search-res >>> .el-input-number.is-controls-right .el-input__inner {
    padding-left: 10px;
    padding-right: 20px;
    height: 30px;
} */

.search-res >>> .search-text {
  color: red;
}

.search-res >>> .el-pager li{
  width:40px;
  height:40px;
  padding: 7px;
}

.search-res >>> .el-pagination .btn-prev .el-icon{
  font-size: 15px;
  margin: 15px;
}

.search-res >>> .el-pagination .btn-next .el-icon{
  font-size: 15px;
  margin: 15px;
}

.search-res .main-body {
  padding: 0 40px 20px 80px;
}

.search-res .header {
  margin-bottom: 40px;
}

.search-res .box-card {
  padding: 20px;
}

.search-res .box-card .sub-block {
  margin-bottom: 20px;
}

.search-res .year-input >>> .el-input--mini .el-input__inner {
  font-size: 13px;
  color: #0274B3;
}

.search-res .year-input >>> .el-input__inner {
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
}

.search-res .year-input >>> .el-input--mini {
  width: 45px;
  text-align: center;
}

.search-res >>> .el-pagination__editor.el-input .el-input__inner {
    height: 40px;
}

.search-res >>> .el-pagination__jump{
  font-size: 15px;
}

.search-res .box-card .check-box-title {
  text-align: left;
  font-size: 17px;
  margin-bottom: 20px;
}

.background {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  z-index:-1;
  object-fit: cover;
}

</style>
